import { Component, ChangeDetectionStrategy, Input, NgZone, ChangeDetectorRef, ElementRef } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd';
import { format, addDays } from 'date-fns';

@Component({
  selector: 'app-actualsale-bar',
  templateUrl: './prod-actual-bar.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class.card]': 'true',
  },
})
export class ProdActualBarComponent {
  @Input()
  loading = true;
  @Input()
  data = [];
  @Input()
  time = null;
  @Input()
  title = '';
  @Input()
  type = '';
  private chart: any;
  table = [];

  showType = 'chart';

  _start = '';
  _end = '';
  _start1 = '';
  _end1 = '';

  @Input()
  set start(val) {
    if (val) {
      this._start = format(val, 'YYYY-MM-DD');
      this._start1 = format(addDays(this._start, -365), 'YYYY-MM-DD');
    }
  }

  @Input()
  set end(val) {
    if (val) {
      this._end = format(val, 'YYYY-MM-DD');
      this._end1 = format(addDays(this._end, -365), 'YYYY-MM-DD');
    }
  }

  constructor(
    public http: _HttpClient,
    public msg: NzMessageService,
    private ngZone: NgZone,
    private cdr: ChangeDetectorRef,
  ) {}

  render(er: ElementRef) {
    this.ngZone.runOutsideAngular(() => setTimeout(() => this.init(this.type, er.nativeElement), 50));
  }

  private init(type, container: HTMLElement) {
    const chart = (this.chart = new G2.Chart({
      container,
      forceFit: true,
      height: 160,
      padding: 'auto',
    }));

    chart.source(this.data);
    chart.scale(`${type === 's' ? 'value' : 'value2'}`, {
      alias: `${type === 's' ? '实销' : '代销'}`,
    });
    chart.axis('type', {
      label: {
        textStyle: {
          fill: '#aaa',
        },
      },
    });

    chart.axis(`${type === 's' ? 'value' : 'value2'}`, {
      label: {
        textStyle: {
          fill: '#aaaaaa',
        },
      },
      title: {
        offset: 50,
      },
    });
    chart.legend({
      position: 'top-center',
    });
    chart
      .interval()
      .position(`${type === 's' ? 'type*value' : 'type*value2'}`)
      .color('company')
      .opacity(1)
      .adjust([
        {
          type: 'dodge',
          marginRatio: 1 / 32,
        },
      ])
      .label(`${type === 's' ? 'value' : 'value2'}`, {
        useHtml: true,
        htmlTemplate: function htmlTemplate(text, item) {
          const a = item.point;
          return (
            '<span class="g2-label-item"><p class="g2-label-item-value">' +
            `${type === 's' ? a.value : a.value2}` +
            '</p></div>'
          );
        },
      });

    chart.render();

    this.table = [
      { type: '批发', value: 0, value2: 0 },
      { type: '零售', value: 0, value2: 0 },
      { type: '电商', value: 0, value2: 0 },
    ];

    this.data.forEach(r => {
      this.table
        .filter(t => t.type === r.type)
        .map(t => {
          if (r.company === '产品季') {
            t.value = this.type === 's' ? r.value : r.value2;
          } else if (r.company === '近一年') {
            t.value2 = this.type === 's' ? r.value : r.value2;
          }
        });
    });
  }
}
